require(['./config'], () => {
  require(['url', 'template', 'header', 'fly', 'scale'], (url, template, header) => {
    class Detail {
      constructor () {
        this.renderDr()
        this.render().then(() => {
          this.addTocart()
          this.scale()
          this.countNum()
        })
      }
      render () {
        const id = location.search.slice(4)
        return new Promise((resolve, reject) => {
          // 根据id去发送详情请求
          $.get(url.getDetail, { id }, resp => {
            if (resp.code === 200) {
              console.log(resp)
              const {
                id,
                photo,
                title,
                couponStatus,
                couponValue,
                saleNum,
                accessoryHints,
                originPrice,
                price,
                descContentList,
                fetchTbItemUrl,
                coupon
              } = resp.data.detail
              this.detail = {
                id,
                photo,
                title,
                couponStatus,
                couponValue,
                saleNum,
                accessoryHints,
                originPrice,
                price,
                descContentList,
                fetchTbItemUrl,
                coupon
              }
              let desc = descContentList.slice(1)
              desc = desc.filter(Img => Img.image)
              $('#imgList').html(template('imgListTemplate',{ desc } ))
              $('#design').html(template('designTemplate', {
                ...this.detail
              }))
              if(coupon.couponText == undefined){
                $('.juan').addClass('hide')
              }
              // 数据返回了页面渲染好了就可以resolve了
              resolve()
            }
          })
        })
      }
      renderDr () {
        $.get( "http://quan.lukou.com/api/tabs?sa=", resp1 => {
          if (resp1.code === 200) {
            resp1.data.list = resp1.data.list.slice(1)
            const  { list }  = resp1.data
            $('#giftList').html(template('giftListTemplate', { list }))
          }
        })
      }
      addTocart () {
        $('#add-to-cart-btn').on('click', e => {
          this.fly(e)
          // 用localStorage加入购物车本地存储数据
          // 先取出localStorage
          let cart = localStorage.getItem('cart')
          // 判断是否有数据
          if (cart) {
            // 购物车已经有数据了
            cart = JSON.parse(cart)
            // 判断购物车里是否已经存在当前商品
            const isExist = cart.some(shop => shop.id === this.detail.id)
            if (isExist) {
              // 当前商品已存在，只需要把当前商品数量加上商品数量
              cart = cart.map(shop => {
                if (shop.id === this.detail.id) shop.count += Number($('#goodsNum').val())
                return shop
              })
            } else {
              // 当前商品还未加入购物车
              cart.push({ ...this.detail, count: Number($('#goodsNum').val()), check: true })
            }
            // 把修改完成之后的cart存入localStorage
            localStorage.setItem('cart', JSON.stringify(cart))
          } else {
            // 购物车为空
            // 把当前detail放入一个数组存入localStorage
            localStorage.setItem('cart', JSON.stringify([ {
              ...this.detail,
              count: Number($('#goodsNum').val()),
              check: true
            } ]))
          }
        })
      }
      fly (e) {
        $(`<img style="width: 30px; height: 30px; border-radius: 50%" src="${this.detail.photo[0].url}">`).fly({
          start:{
            left: e.clientX,  //开始位置（必填）#fly元素会被设置成position: fixed
            top: e.clientY,  //开始位置（必填）
          },
          end:{
            left: $('#cart').offset().left - $(window).scrollLeft(), //结束位置（必填）
            top: $('#cart').offset().top - $(window).scrollTop()  //结束位置（必填）
          },
          speed: 0.7, //越大越快，默认1.2
          onEnd: function () {
            this.destroy()
            // 调用header的方法重新计算购物车数量
            header.calcCartCount()
          } //结束回调
        })
      }
      countNum(){
        // 商品数量编辑
        $('#goodsNum').on('keyup',function(){
          const val = $(this).val()
          if((/^[1-9]\d*$/.test( val ))){
            if(val == 1){
              $('#subBtn').prop('disabled', true)
            }else{
              $('#subBtn').prop('disabled', false)
            } 
          }else{
            $(this).val(1)
            $('#subBtn').prop('disabled', true)
          }
        })
        $('#subBtn').on('click',function(){
          let val = Number($('#goodsNum').val())
          if(val == 2){
            $(this).prop('disabled', true)
          }else{
            $(this).prop('disabled', false)
          }
          $('#goodsNum').val(Number(--val))
        })
        $('#addBtn').on('click',function(){
          let val = Number($('#goodsNum').val())
          $('#goodsNum').val(Number(++val))
          $('#subBtn').prop('disabled', false)
        })
      }
      scale(){
        $('.zoom-image').elevateZoom({
          gallery: 'gal1' // 小图容器盒子，ul的id（不加#）
      })
      }
    }
    new Detail()
  })
})
